<template>
  <div class="equipment">
    <template v-if = "this.$route.path == '/equipment'">
      <div class="main-title">设备列表</div>
      <div class="write">
        <div class="empty">
          <div class="container">
            <div class="row">
              <div class="col col-xxl-9 col-xl-9 col-lg-12 col-md-12">
                <div class="write_">
                  <search @searchOn="searchOn" @clearChange="clearChange"></search>
                  <all-state :allState="allState" @onWrite="onWrite"></all-state><!--  @clearWrite="clearWrite" -->
                </div>
              </div>
              <div class="col col-xxl-3 col-xl-3 col-lg-12 col-md-12">
                <div class="write_r">
                  <el-button @click="newJump('add')" class="addNew">新增</el-button>
                  <!-- <el-button @click="newJump('ctions')" :disabled="!newTableData.length > 0">限制</el-button> -->
                  <el-button @click="newJump('ctions')" :disabled="newTableData.length == 0" v-if="isShows" class="ctions">限制</el-button>
                  <el-button @click="newJump('ctionsIn')" :disabled="newTableData.length == 0" v-else class="ctionsIn">解除</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <el-table stripe :data="tableData" style="width: 100%"  :header-cell-style="{ background: '#f2f2f2', color: '#333', fontWeight: 600, }" @select="selectChange" @select-all="selectAllChange" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column label="设备编号" width="260" align="left" show-overflow-tooltip> 
            <template slot-scope="scope"> 
              <img :src="scope.row.img" style="width: 80px;height: 64px;margin-right: 10px;">
              {{ scope.row.name == null || scope.row.name == '' ? '--' : scope.row.name }} 
            </template>
          </el-table-column>
          <el-table-column label="序列号" align="center" show-overflow-tooltip>
            <template slot-scope="scope"> {{ scope.row.xid == '' || scope.row.xid == null ? '--' : scope.row.xid }} </template>
          </el-table-column>
          <el-table-column label="型号" align="center">
            <template slot-scope="scope"> {{ scope.row.model == null || scope.row.model == '' ? '--' : scope.row.model }} </template>
          </el-table-column>
          <el-table-column label="个人" align="center" show-overflow-tooltip>  
            <template slot-scope="scope">{{ scope.row.iname == null || scope.row. iname == '' ? '--' : scope.row.iname }}</template>
          </el-table-column> 
          <el-table-column label="可用容量/总量" align="center"> 
            <template slot-scope="scope">{{ scope.row.course == null || scope.row.course == '' ? '--' :  scope.row.course + 'G' }} / {{ scope.row.capacity == null || scope.row.capacity == '' ? '--' : scope.row.capacity + 'G' }}</template>
          </el-table-column>
          <el-table-column label="版本" align="center" show-overflow-tooltip>  
            <template slot-scope="scope">{{ scope.row.versions == null || scope.row.versions == '' ? '--' : scope.row.versions }}</template>
          </el-table-column> 
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <span class="status_type">{{ scope.row.status == 1 ? '● 正常' : '' }}</span>
              <span class="status_type_s">{{ scope.row.status == 2 ? '● 限制' : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="添加时间" align="center"> 
            <template slot-scope="scope">{{ scope.row.createDate == null || scope.row.createDate == '' ? '--' : scope.row.createDate }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.$index, scope.row)" type="text" size="small">详情</el-button>
              <!-- <el-button type="text" size="small" @click="limit(scope.$index, scope.row)" :disabled="scope.row.status == 2">限制</el-button> -->
              <el-button type="text" size="small" v-if="scope.row.status === 1" :disabled="!newTableData.includes(scope.row)" @click="limit(scope.$index, scope.row, 'limit')" class="limit">限制</el-button>
              <el-button type="text" size="small" :disabled="!newTableData.includes(scope.row)" v-else @click="limit(scope.$index, scope.row, 'inLimit')" class="inLimit">解除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        
      </div>
    </template>

    <!-- transition vue内置的动画组件 -->
    <transition name="transitionName">
			<router-view clss="index-main" />
    </transition>

  </div>
</template>

<script>
import search from "../../components/search/search.vue";
import allState from "../../components/selector/allState.vue";
export default {
  components: { search, allState },
  data() {
    return {
      allState: [{ value: "正常", label: "正常" }, { value: "限制", label: "限制" }],
      tableData: [],
			currentPage3: 0,   // 那一页
			total: 0,          // 总条数
			pageSize: 20,      // 每页显示多少条
      time: null,        // 搜索防抖
      sou: {
        souSuo: '',
        zhuangTai: '',
      },
      isShow: false,
      isShows: true,
      newTableData: [],  // 全选单选 选中状态
    };
  },
	watch:{
		$route: {
      handler: function(val, oldVal) {
        this.userSearch();  // 返回页面后自动刷新 // console.log(val,oldVal)
      },
      deep: true  // 深度观察监听
		},
	},
  mounted() {
    var _this = this;
    _this.userSearch();  // 列表
  },
  methods: {
    // 表格单选按钮
    selectChange(selection, row) { this.newTableData = selection; },
    // 表格全选按钮
    selectAllChange(selection) { this.newTableData = selection; },
    // 表格选中那一个新数组
    handleSelectionChange(val) {
      this.newTableData = val;
      this.newTableData.filter( item => {
        if(item.status == 2) { this.isShows = false; } 
        else { this.isShows = true; }
      })
    },
    // 搜索
    searchOn(val) { 
			this.sou.souSuo = val;
			this.currentPage3 = 1;
			this.userSearch(this.currentPage3, this.sou.souSuo, this.sou.zhuangTai);
    },
		// 搜索清除按钮
		clearChange() {
			this.sou.souSuo = '';
			this.currentPage3 = 1;
			this.userSearch(this.currentPage3, '', this.sou.zhuangTai);
		},
    // 全部状态
    onWrite(val) {
			val = val == '正常' ? '1' : val == '限制' ? '2' : '';
			this.sou.zhuangTai = val;
			this.currentPage3 = 1;
			if(val != '') {
				this.userSearch(this.currentPage3, this.sou.souSuo, val);
			} else {
				this.sou.zhuangTai = '';
				this.userSearch(this.currentPage3, this.sou.souSuo, '');
			}
    },
    // 详情跳转
    handleClick(index,row) {
      sessionStorage.setItem('jumpListUser',JSON.stringify(row));
      this.$router.push({ name: 'eqDetails' });
    },
    // 右上角新增或限制/接触限制按钮
    newJump(state){
      if(state == 'add') {
        this.$router.push({ path: '/equipment/machine' })
      } else if(state == 'ctions') {
        // 限制当前设备的账号登录
        this.$confirm('是否要限制当前设备的账号登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const newTableDate = [];
          this.newTableData.filter( res => {
            newTableDate.push(res.id);
          })
          this.$http.equipment.YoulimitList({ide: newTableDate.toString()}).then( res => {
            console.log(res)
            if(res.code == 0) {
              this.$message({
                type: 'success',
                message: '限制成功!'
              });
              this.userSearch(this.currentPage3, this.sou.souSuo, this.sou.zhuangTai);  // 现在成功后请求数据 该数据还是继续在该页面
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消限制'
          });
        });
      } else if(state == 'ctionsIn') {
        // 限制当前设备的账号登录
        this.$confirm('是否要解除当前设备账号登录限制？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const newTableDate = [];
          this.newTableData.filter( res => {
            newTableDate.push(res.id);
          })
          this.$http.equipment.piLiangReqrelieve({ide: newTableDate.toString()}).then( res => {
            console.log(res)
            if(res.code == 0) {
              this.$message({
                type: 'success',
                message: '解除限制成功!'
              });
              this.userSearch(this.currentPage3, this.sou.souSuo, this.sou.zhuangTai);  // 现在成功后请求数据 该数据还是继续在该页面
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消解除限制'
          });
        });
      }
    },
    // 操作限制
    limit(index, row, state){
      if(state == 'limit'){
        this.$http.equipment.limitList({id: row.id}).then( res => {
          this.userSearch();
          this.$message({
            message: '限制当前设备成功',
            type: 'success'
          });
        })
      } else {  // 解除限制
        this.$http.equipment.piLiangRrelieve({id: row.id}).then( res => {
          this.userSearch();
          this.$message({
            message: '成功解除当前设备限制',
            type: 'success'
          });
        })
      }
    },
    // 分页
    handleSizeChange(val) { this.currentPage3 = val; },
    handleCurrentChange(val) {
      this.currentPage3 = val;
			this.userSearch(val, this.sou.souSuo, this.sou.zhuangTai);
    },
    // 公共分页请求
    userSearch(val, souSuo, zhuangTai){
      this.$http.equipment.equipmentList({page: val,name: souSuo,status: zhuangTai}).then(res => {
        this.tableData = res.data;
        this.total = res.total;
        this.currentPage3 = res.currentPage;
      })
    }
  }
};
</script>

<style scoped>
@import '../../assets/css/equipment/equipment.scss';
</style>